<%@ page language="java" contentType="text/html; charset=UTF-8"	 pageEncoding="UTF-8"%>
<%@ include file="../include/laypublic.jsp"%>
<!DOCTYPE html>
<html>
<head>
  <title>工作流管理</title>
</head>
<style>
	.layui-form-select dl{max-height: 150px;}
  	.layui-upload{
	    float: left;
	}
  .layui-upload-img-div{position: relative;width: 92px; height: 140px;float: left;margin-left:10px}
  .layui-upload-img{width: 92px; height: 92px; margin: 0 10px 10px 0;}
  .mask {
    position: absolute;
    top: 70px;
    left: 0;
    width: 92px;
    height: 22px;
    background: rgba(101, 101, 101, 0.6);
    color: #ffffff;
    opacity: 0;
	}
	.layui-upload-img-div:hover .mask {
	    opacity: 1;      
	}
	.layui-upload-img-div a{
	    text-align:center;
	    color:#fff;
	    margin-left:12px;
	}
	.layui-upload-img-div p{
	    text-align:center;
	    text-overflow:ellipsis; 
	    white-space:nowrap; 
	    overflow:hidden;
	}
</style>
<body>
  <div class="layui-fluid">   
    <div class="layui-card">
  	  <!-- 查询区域  -->
      <div id="query-form" class="layui-form layui-card-header layuiadmin-card-header-auto">
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">模板名称</label>
            <div class="layui-input-inline">
              <input type="text" name="sname" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-inline" style="width:400px;">
            <label class="layui-form-label" style="width:130px;">对应业务表单表名</label>
            <div class="layui-input-inline">
              <input type="text" name="srcBizTable" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">备忘</label>
            <div class="layui-input-inline">
              <input type="text" name="memo" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
          </div>
          <shiro:hasPermission name="LIST_FLOW">
	          <div class="layui-inline">
	            <button class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="LAY-visit-log-search">
	              <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>查询
	            </button>
	            <button class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="LAY-user-back-reset">
	              <i class="layui-icon layui-icon-fonts-clear  layuiadmin-button-btn"></i>重置
	            </button>
	          </div>
          </shiro:hasPermission>
        </div>
      </div>
  	  <!-- 按钮区域  -->
      <div class="layui-card-body">
        <div style="padding-bottom: 10px;">
          <shiro:hasPermission name="ADD_FLOW">
          	<button class="layui-btn layuiadmin-btn-admin " data-type="add">
          	 <i class="layui-icon layui-icon-add-1 layuiadmin-button-btn"></i>新增
          	</button>
          </shiro:hasPermission>
        </div>
        <!-- 数据表单 -->
        <table id="LAY-flow-manage" lay-filter="LAY-flow-manage"></table>
        
        <!-- 新增工作流单 -->
        <div class="layui-form" lay-filter="add_form" id="add_form" style="padding: 20px 30px 0 0;display:none">
        	<form id="save_form">
		    <div class="layui-form-item">
		      <label class="layui-form-label">模板名称</label>
		      <div class="layui-input-block">
		        <input type="text" name="sname" maxlength="50" lay-verify="required" placeholder="请输入模板名称" autocomplete="off" class="layui-input">
		      </div>
		    </div>
		    <div class="layui-form-item">
		      <label class="layui-form-label">对应业务表单表名</label>
		      <div class="layui-input-block">
		        <input type="text" name="srcBizTable" maxlength="40" lay-verify="required" placeholder="请输入对应业务表单表名" autocomplete="off" class="layui-input">
		      </div>
		    </div>
		    <div class="layui-form-item">
		    	<label class="layui-form-label">是否可修改</label>
			    <div class="layui-input-inline">
			    	<select id="add_from-bisModify" name="isEdit" lay-verify="required">
			    		<option value="">请选择</option>
						<option value="1">可修改</option>
    					<option value="0">不可修改</option>  
					</select>
			    </div>
		  	</div>
		  	<div class="layui-form-item">
		      <label class="layui-form-label">备忘</label>
		      <div class="layui-input-block">
				<textarea name="memo" class="layui-textarea" maxlength="200"
								lay-verify="required" style="width:380px;height:40px;" placeholder="请输入备忘" autocomplete="off"></textarea>
		      </div>
		    </div>
		    <div class="layui-form-item">
		      <label class="layui-form-label">分支标识 </label>
		      <div class="layui-input-block">
		        <input type="text" name="branchCode" maxlength="100" placeholder="请输入分支标识（选填）" autocomplete="off" class="layui-input">
		      </div>
		    </div>
		    <div class="layui-form-item layui-hide">
		      <input type="button" lay-submit lay-filter="add_form_submit" id="add_form_submit" value="确认">
		    </div>
		    </form>
	  	</div>
      </div>
    </div>
  </div>

  <script>
  var stateJSON = <infopub:dicJson groupNo="A00010028" />;
	
  layui.config({
    base: '${ctx}/resources/layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'table', 'set', 'laydate', 'upload', 'element'], function(){
    var $ = layui.$
    ,form = layui.form
    ,laydate = layui.laydate
    ,upload = layui.upload
    ,element = layui.element
    ,table = layui.table;
    
    // 表单
    table.render({
      elem: '#LAY-flow-manage'
      ,url: basePath + '/flow/queryDataByCondition' //请求数据接口
      ,cols: [[
        {type: 'checkbox', fixed: 'left'}
        ,{field: 'sname', title: '模板名称',width:200}
        ,{field: 'srcBizTable', title: '对应业务表单表名',width:200}
        ,{field: 'isEdit', title: '是否可修改', templet: function(d){
    		   return d.isEdit == '1' ? '可修改' : '不可修改';
    		}
        }
        ,{field: 'isUsable', title: '是否可用', templet: function(d){
    		   return d.isUsable == '1' ? '可用' : '不可用';
    		}
        }
        ,{field: 'memo', title: '备忘',width:170, templet: function(d){
    		return d.memo||global_null_tip;
    		}
        }
        ,{field: 'branchCode', title: '分支标识', templet: function(d){
    		return d.branchCode||global_null_tip;
    		}
        }
       /*  ,{field: 'addTime',title: '创建时间',width:170,templet: function(d){
    		return layui.util.toDateString(d.addTime,"yyyy-MM-dd HH:mm:ss");
	 		}
	     } */
        ,{title: '操作', width: 180, align:'center', fixed: 'right', templet: function(d){
      	  		var optStr ="";
			   	<shiro:hasPermission name="VIEW_FLOW">
			   		optStr += '<a class="layui-btn layui-btn-xs" lay-event="view"><i class="layui-icon layui-icon-form"></i>详情</a>';
		      	</shiro:hasPermission>
	      		if(d.isEdit == 1){//配置节点
				   	<shiro:hasPermission name="ADD_NODE_FLOW">
					     optStr += '<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="addNode"><i class="layui-icon layui-icon-survey"></i>配置节点</a>';
			      	</shiro:hasPermission>
		    	}
	  		  return optStr;
        	}
        }
      ]]
      ,page: true
      ,limit: 10
    });
    
    // 监听操作列
    table.on('tool(LAY-flow-manage)', function(obj){
      var data = obj.data;
      if(obj.event === 'view'){//查看详情
    	  parent.layui.index.openTabsPage(basePath + '/flow/queryById?id='+data.id+'&flag=detail','审批流配置 > 详情');
      }else if(obj.event === 'addNode'){//配置节点
    	  parent.layui.index.openTabsPage(basePath + '/flow/queryById?id='+data.id+'&flag=addNode','审批流配置  > 节点配置');
      }
    });
    
    // 按钮事件
    var active = {
      add: function(){
    	  clean_form("add_form");//清空表单
    	  layer.open({
       		type: 1
          	,title: '添加审批流'
          	,content: $('#add_form')
          	,area: layui.admin.screen() < 2 ? ['80%', '470px'] : ['520px','470px']
          	,btn: ['确定', '取消']
          	,btnAlign: 'c'
          	,yes: function(index, layero){
          		var submitID = 'add_form_submit'
            	,submit = layero.contents().find('#'+ submitID);
              	//监听提交
           	  	form.on('submit('+ submitID +')', function(data){
	              	//提交 Ajax 成功后，静态更新表格中的数据
	              	$.ajax({
	                  	type : 'post',
						url : basePath + '/flow/add',
	                  	data: $('#save_form').serialize(),
						success:function(result){
							if(result.success){
	              				table.reload('LAY-flow-manage'); //数据刷新
	              				clean_form("add_form");//清空表单
	              				layer.close(index); //关闭弹层
							}else{
								layer.msg(result.msg,{icon: 7});
						  	}
						}
	              	});
            	});  
            	submit.trigger('click');
       			}
       		}); 
      	}
    }  
    // data-type事件
    $('.layui-btn.layuiadmin-btn-admin').on('click', function(){
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });
    
    <shiro:hasPermission name="LIST_FLOW">
	    //监听搜索
	    form.on('submit(LAY-visit-log-search)', function(data){
	      	//执行重载
	      	table.reload('LAY-flow-manage', {page: {curr: 1},
	        	where: trimData(data)
	      	});
	    });
		//重置清空
	    form.on('submit(LAY-user-back-reset)', function(data){
	    	reset_form('query-form');
	    });
	</shiro:hasPermission>
    
  });
  	
  </script>
</body>
</html>

